<template>
  <div class="order-manage-container">
    <div class="addOrderBox">
      <el-button
        type="primary"
        @click="addRepairOrder"
        v-if="activeName === 'first'"
        v-has="'maintenanceApp:workOrderManage:repair-add'"
        >创建维修工单</el-button
      >
      <el-button type="primary" @click="addRepairOrder" v-else v-has="'maintenanceApp:workOrderManage:maintain-add'"
        >创建保养工单</el-button
      >
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabsStyle">
      <el-tab-pane
        label="维修工单"
        name="first"
        class="first-tab-pane"
        v-if="checkBtnPermission('maintenanceApp:workOrderManage:repair')"
      >
        <div class="operate-bar">
          <ul>
            <li>
              <el-select
                v-model="selectStatus"
                placeholder="所有状态"
                class="statusAll"
                clearable
                @change="getTableData"
              >
                <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-select
                v-model="selectSource"
                placeholder="所有工单来源"
                class="sourceAll"
                clearable
                @change="getTableData"
              >
                <el-option v-for="(item, index) in sourceOptions" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <div class="DateFilters">
                <el-date-picker
                  v-model="DateFilters"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="getTableData"
                >
                </el-date-picker>
              </div>
              <el-input
                placeholder="输入工单编号查找"
                class="orderNum"
                v-model="selectNum"
                v-on:keyup.enter.native="getTableData"
                clearable
                @clear="getTableData"
              >
              </el-input>
              <el-checkbox class="hideOrder" v-model="hiddenOrder" @change="getTableData">隐藏已完成工单</el-checkbox>
            </li>
          </ul>
        </div>
        <CommonTable
          :options="tableConfig.options"
          :columns="tableConfig.columns"
          :actions="tableConfig.actions"
          :data="tableData"
          @handleSortChange="handleSortChange"
          class="tableBox"
        ></CommonTable>
        <CommonPagination :options="paginationOptions" :dataSource="getTableData" class="pagedown"></CommonPagination>
      </el-tab-pane>
      <el-tab-pane label="保养工单" name="second" v-if="checkBtnPermission('maintenanceApp:workOrderManage:maintain')">
        <div class="operate-bar">
          <ul>
            <li>
              <el-select
                v-model="selectStatus"
                placeholder="所有状态"
                class="statusAll"
                clearable
                @change="getTableData"
              >
                <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-select
                v-model="selectSource"
                placeholder="所有工单来源"
                class="sourceAll"
                clearable
                @change="getTableData"
              >
                <el-option
                  v-for="(item, index) in maintainSourceOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <div class="DateFilters">
                <el-date-picker
                  v-model="DateFilters"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="getTableData"
                >
                </el-date-picker>
              </div>
              <el-input
                placeholder="输入工单编号查找"
                v-model="selectNum"
                class="orderNum"
                clearable
                v-on:keyup.enter.native="getTableData"
                @clear="getTableData"
              >
              </el-input>
              <el-checkbox class="hideOrder" v-model="hiddenOrder" @change="getTableData">隐藏已完成工单</el-checkbox>
            </li>
          </ul>
        </div>
        <CommonTable
          :options="maintainTableConfig.options"
          :columns="maintainTableConfig.columns"
          :actions="maintainTableConfig.actions"
          :data="tableData"
          @handleSortChange="handleSortChange"
          class="tableBox"
        ></CommonTable>
        <CommonPagination :options="paginationOptions" :dataSource="getTableData" class="pagedown"></CommonPagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :title="activeName === 'first' ? '新增维修工单' : '新增保养工单'"
      :visible.sync="dialogAddOrder"
      width="600px"
      top="11vh"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      v-if="dialogAddOrder"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="设备编号" prop="selectDevice">
          <el-select
            v-model="ruleForm.selectDevice"
            filterable
            clearable
            placeholder="请选择"
            @change="changeDevice"
            class="select"
          >
            <el-option v-for="(item, index) in numOptions" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="activeName === 'first' ? '故障描述' : '保养说明'" prop="description">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="ruleForm.description"
            maxlength="500"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="上报供应商"
          v-if="activeName === 'first'"
          v-has="'maintenanceApp:workOrderManage:repair-report'"
        >
          <el-switch v-model="ruleForm.isReport"></el-switch>
          <span class="isReportDescribe">上报维修工单给供应商，由供应商安排维修人员进行处理</span>
        </el-form-item>
        <el-form-item label="现场图片">
          <div :class="{ noneBtn: fiveMore, showBtn: fiveLess }">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="handleBeforeUpload"
              :http-request="httpRequest"
              :file-list="imgList"
              :limit="5"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogImg" :modal="false" width="30%">
              <img width="100%" height="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
            <p class="sc-color-gray">支持JPG\PNG\GIF格式，文件不大于2M，最多不能超过5张</p>
          </div>
        </el-form-item>
        <el-form-item label="现场联系人" prop="contacts">
          <el-input v-model="ruleForm.contacts" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item prop="contacts_tel">
          <template slot="label"><span style="color: red">* </span>联系人电话</template>
          <el-input v-model="ruleForm.contacts_tel" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="设备地址" prop="address">
          <el-input v-model="ruleForm.address" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="合同编号" prop="project_contract">
          <el-input v-model="ruleForm.project_contract" placeholder="请输入内容" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddOrder = false">取 消</el-button>
        <el-button type="primary" @click="submitAddOrder">确 定</el-button>
      </span>
    </el-dialog>
    <modify-dialog :show.sync="dialogModify" @sonClick="succeedPoint" :modifyData.sync="modifyData"></modify-dialog>
    <details-dialog
      :show.sync="dialogDetails"
      :detailData.sync="detailData"
      :TEMPdata.sync="OrderDetails"
      @sonClick="sonClick"
      v-if="dialogDetails"
    ></details-dialog>
    <el-dialog
      title="派单"
      :visible.sync="dialogDistribute"
      width="600px"
      top="18vh"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="titleName">
        <p>{{ clickRow.device_name }}</p>
        <span>({{ clickRow.device_number }})</span>
      </div>
      <div class="messageBox">
        <div>
          <div>
            <span>工单编号</span><span>{{ clickRow.order_no }}</span>
          </div>
          <div>
            <span>所属公司</span><span>{{ clickRow.customer_name }}</span>
          </div>
        </div>
        <div>
          <div>
            <span>工单来源</span><span>{{ clickRow.source }}</span>
          </div>
          <div>
            <span>工单状态</span><span>{{ clickRow.status }}</span>
          </div>
        </div>
      </div>
      <el-form
        :model="DistributeRuleForm"
        :rules="DistributeRules"
        ref="DistributeRuleForm"
        label-width="100px"
        class="ruleForm"
      >
        <el-form-item label="选择工程师" prop="engineer">
          <el-select v-model="engineer" filterable clearable placeholder="请选择" class="select">
            <el-option v-for="item in engineerOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="抄送通知" prop="selectUser">
          <el-select v-model="selectUser" filterable clearable multiple placeholder="请选择" class="select">
            <el-option v-for="item in userOptions" :key="item.id" :label="item.username" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDistribute = false">取 消</el-button>
        <el-button type="primary" @click="setAssign">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="取消工单"
      :visible.sync="dialogCancelOrder"
      width="600px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="warningBox">
        <div style="display: inline-block">
          <i class="el-message__icon el-icon-warning warningIcon"></i>
        </div>
        <div class="warningTitle"><span>工单取消后，相关处理及流转将中止， 确定取消此工单？</span></div>
      </div>
      <div>
        <el-form>
          <el-form-item label="取消理由">
            <el-input
              type="textarea"
              v-model="deleteReason"
              class="ReasonInput"
              maxlength="100"
              show-word-limit
              :row="8"
              placeholder="简述取消工单的理由，限100字"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCancelOrder = false">取 消</el-button>
        <el-button type="primary" @click="setCancelOrder">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="删除工单"
      :visible.sync="dialogDeleteOrder"
      width="400px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div style="display: inline-block">
        <i class="el-message__icon el-icon-warning warningIcon"></i>
      </div>

      <div class="warningTitle">
        <span
          >确定删除工单(<span style="color: #3378ff">{{ clickRow.order_no }}</span
          >)</span
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteOrder = false">取 消</el-button>
        <el-button type="primary" @click="submitDeleteOrder">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="trueEdit ? '编辑知识库' : '工单转知识库'"
      :visible.sync="addknowledgeDialog"
      :append-to-body="true"
      width="1000px"
      top="15vh"
      @close="onDeleteForm"
      :close-on-click-modal="false"
    >
      <div>
        <el-form :model="addForm" :rules="rulesKnowledge" ref="ruleFormref" label-width="100px" class="demo-ruleForm">
          <el-form-item label="物模型" prop="modelName">
            <el-select
              class="add-knowledge-select-class1"
              v-model="addForm.modelName"
              filterable
              clearable
              disabled
              placeholder="物模型"
            >
              <el-option v-for="(item, index) in modelSelectData" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-input v-model="knowledgeFindName" placeholder="输入知识代码/名称查找"></el-input> -->
          </el-form-item>
          <el-form-item label="知识分类" prop="knowledgeTypeName">
            <div class="knowlege-flex">
              <el-select
                class="add-knowledge-select-class"
                v-model="addForm.knowledgeTypeName"
                filterable
                clearable
                placeholder="请选择知识库分类"
              >
                <el-option
                  v-for="(item, index) in addForm.knowledgeTypeArr"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <div class="add-knowledge-jurisdiction">
                <span class="sc-color-red">*</span> <span class="add-knowledge-margin">权限</span>
                <el-radio v-model="addForm.jurisdictionValue" label="2">公开</el-radio>
                <el-radio v-model="addForm.jurisdictionValue" label="1">内部</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="标题" prop="titleValue">
            <el-input v-model="addForm.titleValue" placeholder="限输入1~16个文字"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="contentVlaue">
            <Editor ref="textEdit" :editorValue="addForm.contentVlaue" @onEditorValue="onEditorValue"></Editor>
          </el-form-item>
          <el-form-item label="现场图片" prop="modelName">
            <div :class="{ noneBtn: fiveMore, showBtn: fiveLess }">
              <el-upload
                action="#"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-change="handleBeforeUpload"
                :http-request="httpRequest"
                :file-list="imgList"
                :limit="5"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog append-to-body :visible.sync="dialogImg" :modal="false" width="30%">
                <img width="100%" height="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <p class="sc-color-gray">支持JPG\PNG\GIF格式，文件不大于2M，最多不能超过5张</p>
            </div>
          </el-form-item>
          <el-form-item label="上传附件" prop="modelName">
            <el-upload
              class="upload-demo"
              action
              :on-change="addUploadFile"
              :auto-upload="false"
              :on-remove="removeFile"
              multiple
              :limit="1"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <span slot="tip" class="sc-color-gray add-knowledge-file">文件大小不能超过10M</span>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addknowledgeDialog = false">取 消</el-button>
        <el-button type="primary" @click="trueEdit ? editKnowledgeSubmit() : addKnowledgeSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import checkBtnPermission from '@/utils/checkBtnPermission';
import Editor from '../knowledgeBase/components/wangEditor.vue';
import CommonTable from '@/components/CommonTable.vue';
import CommonPagination from '@/components/CommonPagination.vue';
import modifyDialog from '@/components/CommonModifyDialog.vue';
import detailsDialog from '@/components/CommonDetailsDialog.vue';
import {
  getDeviceList,
  createOrder,
  getOrderDetails,
  getOrderList,
  getSystemUserList,
  getEngineerList,
  cancelOrder,
  dispatchOrder,
  DeleteOrder,
  getKnowCategoryList,
  getDeviceLastProject,
  getDeviceLastContact,
  createKnow
} from '@/api/orderManage';
import { getModelList, uploadFile } from '@/api/knowledgeBaseApi.js';
// import func from 'vue-editor-bridge';
// import func from 'vue-editor-bridge';
export default {
  name: 'workOrderManage',
  components: {
    CommonTable,
    CommonPagination,
    modifyDialog,
    detailsDialog,
    Editor
  },
  watch: {},
  data() {
    let validatePass2 = (rule, value, callback) => {
      console.log('测试1111');

      if (value === '') {
        console.log('测试22222');
        callback();
      } else {
        console.log('测试33333');
        let regu = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/ || '';
        let re = new RegExp(regu);
        if (re.test(value)) {
          callback();
        } else {
          callback('手机号码输入有误');
        }
      }
    };

    return {
      selectStatus: '', //筛选所有状态
      statusOptions: [
        { label: '已创建', value: '1' },
        { label: '已派单', value: '2' },
        { label: '已接单', value: '3' },
        { label: '已完成', value: '4' },
        { label: '已取消', value: '5' }
      ],
      selectSource: '', //选中的来源
      //维保筛选来源下拉列表
      sourceOptions: [
        { label: '手动创建', value: '1' },
        { label: '故障记录', value: '2' },
        { label: '上报工单', value: '3' }
      ],
      maintainSourceOptions: [
        { label: '手动创建', value: '1' },
        { label: '保养通知', value: '2' }
        // { label: '无上报工单', value: '3' }
      ],
      selectNum: '', //筛选工单编号
      sourceAll: '', //筛选所有来源
      DateFilters: [], //筛选时间
      tableData: [], //表格数据
      modelSelectData: [], //物模型数据
      rulesKnowledge: {
        //新增plc输入框校验
        knowledgeTypeName: [{ required: true, message: '请选择知识库分类', trigger: 'blur' }],
        titleValue: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 16, message: '限16个文字', trigger: 'blur' }
        ],
        contentVlaue: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      //新增维修工单参数
      ruleForm: {
        deviceName: '',
        deviceNum: '',
        description: '',
        isReport: false,
        contacts: '',
        contacts_tel: '',
        project_contract: '',
        address: '',
        selectDevice: ''
      },
      //知识库
      addForm: {
        modelNameArr: [],
        modelName: '',
        knowledgeTypeArr: [],
        knowledgeTypeName: '',
        jurisdictionValue: '2',
        titleValue: '',
        contentVlaue: '',
        isClear: false //清除富文本编辑器内容
      },
      //验证规则
      rules: {
        deviceNum: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
        contacts: [{ required: true, message: '请输入现场联系人', trigger: 'blur' }],
        selectDevice: [{ required: true, message: '请选择设备', trigger: 'change' }],
        contacts_tel: [
          { validator: validatePass2, trigger: 'blur' }
          // {
          //   pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/ || '',
          //   message: '联系电话输入错误'
          // }
        ]
      },
      //分页配置
      paginationOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 15,
        pageSizes: [15, 30, 50, 100],
        pagerCount: 5,
        isShow: true,
        isDisabled: false
      },
      activeName: 'first', //标签页默认选中
      dialogAddOrder: false, //新增维修工单弹窗
      dialogImageUrl: '', //预览图片地址
      dialogImg: false, //图片预览弹窗
      dialogDeleteOrder: false, //删除工单
      disabled: false,
      dialogModify: false, //修改弹窗
      dialogDetails: false, //详情弹窗
      numOptions: [], //设备编号列表
      selectDevice: '', //选中的设备
      deviceList: [], //设备列表
      imgList: [], //上传图片列表
      fiveMore: false, //控制图片按钮
      fiveLess: true, //控制图片按钮
      modifyData: { project_contract: '' }, //修改数据
      dialogDistribute: false, //指派工单弹窗
      clickRow: {}, //点击的行
      DistributeRuleForm: { engineer: '' }, //指派参数
      DistributeRules: { engineer: [{ required: true, message: '请选择工程师', trigger: 'blur' }] }, //指派的验证
      selectUser: [], //抄送用户
      engineer: [], //选择的工程师
      userOptions: [], //用户列表
      engineerOptions: [], //工程师列表
      dialogCancelOrder: false,
      detailData: {}, //详情的数据
      OrderDetails: {},
      deleteReason: '', //删除理由
      hiddenOrder: false,
      addknowledgeDialog: false, //知识库
      trueEdit: false,
      fileList: [], //文件上传列表
      device_model_id: '', //转知识库需要的物模型id
      tableMaxHeight: '',
      knowledgeText: '', //转知识库默认文本
      last_customer_id: '', //本体公司标志 1 是长泰 非1是客户
      customer_limit: ''
    };
  },
  computed: {
    tableConfig() {
      return {
        // table - options
        options: {
          height: '550px',
          hasSelection: true,
          hasIndex: true,
          lableIndex: '序号',
          isStripe: true,
          isBorder: false,
          isLoading: false,
          headerRowStyle: ({ row, rowIndex }) => {
            return {};
          },
          headerCellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          },
          rowStyle: ({ row, rowIndex }) => {
            return {};
          },
          cellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0', 'white-space': 'nowrap', overflow: 'hidden', 'text-overflow': 'ellipsis' };
          }
        },
        // table - columns
        columns: [
          {
            prop: 'order_no',
            label: '工单编号',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'device_number',
            label: '设备编号',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'device_name',
            label: '设备名称',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'source',
            label: '工单来源',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'description',
            label: this.activeName === 'first' ? '故障描述' : '保养说明',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'status',
            label: '状态',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'updated_time',
            label: '更新时间',
            width: '',
            hasSort: 'custom',
            isShow: true
          }
        ],

        // table - actions
        actions: {
          title: '操作',
          width: 200,
          links: [
            {
              label: '详情',
              type: 'primary',
              permission: 'maintenanceApp:workOrderManage:repair-detail',
              handleLinkClick: row => {
                this.dialogDetails = true;
                this.detailData = row;
                this.clickRow = row;
                getOrderDetails(row.id).then(res => {
                  this.OrderDetails = res.data;
                });
              },
              handleLinkShow: row => {
                return true;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '指派工单',
              type: 'primary',
              permission: 'maintenanceApp:workOrderManage:repair-assign',
              handleLinkClick: row => {
                this.dialogDistribute = true;
                this.clickRow = row;
              },
              handleLinkShow: row => {
                if (row.status === '已创建') {
                  if (
                    row.customer_limit === 3 ||
                    row.customer_limit === 2 ||
                    (row.customer_limit === 1 && row.source !== '上报工单')
                  ) {
                    return true;
                  }
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '取消工单',
              type: 'danger',
              color: '#F56C6C',
              permission: 'maintenanceApp:workOrderManage:repair-cancel',
              handleLinkClick: row => {
                this.dialogCancelOrder = true;
                this.clickRow = row;
                this.deleteReason = '';
              },
              handleLinkShow: row => {
                if (row.status === '已接单' || row.status === '已创建' || row.status === '已派单') {
                  if (row.customer_limit === 1 || row.customer_limit === 2) {
                    return true;
                  }
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '删除工单',
              type: 'danger',
              color: '#F56C6C',
              permission: 'maintenanceApp:workOrderManage:repair-delete',
              handleLinkClick: row => {
                this.dialogDeleteOrder = true;
                this.clickRow = row;
              },
              handleLinkShow: row => {
                if (row.status === '已取消') {
                  if (row.customer_limit === 1 || row.customer_limit === 2) {
                    return true;
                  }
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '重新创建工单',
              type: 'primary',
              permission: 'maintenanceApp:workOrderManage:repair-rebuild',
              handleLinkClick: row => {
                console.log(row);

                this.$nextTick(function () {
                  this.ruleForm.selectDevice = row.device_id;
                  this.ruleForm.description = row.description;
                  this.ruleForm.contacts = row.contacts;
                  this.ruleForm.contacts_tel = row.contacts_tel;
                  this.ruleForm.address = row.address;
                  this.dialogAddOrder = true;
                });
              },
              handleLinkShow: row => {
                if (row.status === '已取消') {
                  return true;
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '转知识库',
              type: 'primary',
              permission: 'maintenanceApp:workOrderManage:repair-transferKnowledge',
              handleLinkClick: row => {
                this.knowledgeText = {};
                this.knowledgeText = row; //获取转知识库内容
                this.onAddKnowledge(row.device_model_id);
              },
              handleLinkShow: row => {
                if (row.status === '已完成' || this.activeName === 'first') {
                  return true;
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '修改工单',
              type: 'primary',
              permission: 'maintenanceApp:workOrderManage:repair-edit',
              handleLinkClick: row => {
                this.modifyData = row;
                this.modifyData.imgList = [];
                this.imgList = JSON.parse(row.photos);

                for (let i in this.imgList) {
                  this.modifyData.imgList[i] = {};
                  this.modifyData.imgList[i].url = this.imgList[i];
                }
                this.dialogModify = true;
              },
              handleLinkShow: row => {
                if (row.status === '已派单' || row.status === '已创建') {
                  return true;
                }
                return false;
              }
            }
          ]
        }
      };
    },
    maintainTableConfig() {
      return {
        // table - options
        options: {
          height: '550px',
          hasSelection: true,
          hasIndex: true,
          lableIndex: '序号',
          isStripe: true,
          isBorder: false,
          isLoading: false,
          headerRowStyle: ({ row, rowIndex }) => {
            return {};
          },
          headerCellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          },
          rowStyle: ({ row, rowIndex }) => {
            return {};
          },
          cellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0', 'white-space': 'nowrap', overflow: 'hidden', 'text-overflow': 'ellipsis' };
          }
        },
        // table - columns
        columns: [
          {
            prop: 'order_no',
            label: '工单编号',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'device_number',
            label: '设备编号',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'device_name',
            label: '设备名称',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'source',
            label: '工单来源',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'description',
            label: '保养说明',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'status',
            label: '状态',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'updated_time',
            label: '更新时间',
            width: '',
            hasSort: 'custom',
            isShow: true
          }
        ],
        // table - actions
        actions: {
          title: '操作',
          width: 200,
          links: [
            {
              label: '详情',
              type: 'primary',
              permission: 'maintenanceApp:workOrderManage:maintain-detail',
              handleLinkClick: row => {
                this.dialogDetails = true;
                this.detailData = row;
                this.clickRow = row;
                getOrderDetails(row.id).then(res => {
                  this.OrderDetails = res.data;
                });
              },
              handleLinkShow: row => {
                return true;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '指派工单',
              type: 'primary',
              permission: 'maintenanceApp:workOrderManage:maintain-assign',
              handleLinkClick: row => {
                this.dialogDistribute = true;
                this.clickRow = row;
              },
              handleLinkShow: row => {
                if (row.status === '已创建') {
                  if (
                    row.customer_limit === 3 ||
                    row.customer_limit === 2 ||
                    (row.customer_limit === 1 && row.source !== '上报工单')
                  ) {
                    return true;
                  }
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '取消工单',
              type: 'danger',
              color: '#F56C6C',
              permission: 'maintenanceApp:workOrderManage:maintain-cancel',
              handleLinkClick: row => {
                this.dialogCancelOrder = true;
                this.clickRow = row;
                this.deleteReason = '';
              },
              handleLinkShow: row => {
                if (row.status === '已接单' || row.status === '已创建' || row.status === '已派单') {
                  if (row.customer_limit === 1 || row.customer_limit === 2) {
                    return true;
                  }
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '删除工单',
              type: 'danger',
              color: '#F56C6C',
              permission: 'maintenanceApp:workOrderManage:maintain-delete',
              handleLinkClick: row => {
                this.dialogDeleteOrder = true;
                this.clickRow = row;
              },
              handleLinkShow: row => {
                if (row.status === '已取消') {
                  if (row.customer_limit === 1 || row.customer_limit === 2) {
                    return true;
                  }
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '重新创建工单',
              type: 'primary',
              permission: 'maintenanceApp:workOrderManage:maintain-rebuild',
              handleLinkClick: row => {
                console.log(row);
                this.$nextTick(function () {
                  this.ruleForm.selectDevice = row.device_id;
                  this.ruleForm.description = row.description;
                  this.ruleForm.contacts = row.contacts;
                  this.ruleForm.contacts_tel = row.contacts_tel;
                  this.ruleForm.address = row.address;
                  this.dialogAddOrder = true;
                });
              },
              handleLinkShow: row => {
                if (row.status === '已取消') {
                  return true;
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '转知识库',
              type: 'primary',
              permission: 'maintenanceApp:workOrderManage:repair-transferKnowledge',
              handleLinkClick: row => {
                this.knowledgeText = {};
                this.knowledgeText = row; //获取转知识库内容
                this.onAddKnowledge(row.device_model_id);
              },
              handleLinkShow: row => {
                if (row.status === '已完成' && this.activeName === 'first') {
                  if (
                    row.customer_limit === 3 ||
                    row.customer_limit === 2 ||
                    (row.customer_limit === 1 && row.source === 1)
                  ) {
                    return true;
                  }
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '修改工单',
              type: 'primary',
              permission: 'maintenanceApp:workOrderManage:maintain-edit',
              handleLinkClick: row => {
                this.modifyData = row;
                // this.imgList = JSON.parse(row.photos);
                let imgList = JSON.parse(this.modifyData.photos);
                this.modifyData.imgList = [];

                for (let i in imgList) {
                  this.modifyData.imgList[i] = {};
                  this.modifyData.imgList[i].url = imgList[i];
                }
                console.log(this.modifyData.imgList);
                this.dialogModify = true;
              },
              handleLinkShow: row => {
                if (row.status === '已派单' || row.status === '已创建') {
                  if (row.customer_limit === 1 || row.customer_limit === 2) {
                    return true;
                  }
                }
                return false;
              }
            }
          ]
        }
      };
    }
  },
  created() {
    this.activeName = this.checkBtnPermission('maintenanceApp:workOrderManage:repair') ? 'first' : 'second';
    this.last_customer_id = JSON.parse(localStorage.getItem('userInfo')).last_customer_id;

    console.log(typeof this.last_customer_id, '查看身份');
  },
  mounted() {
    this.onModelData();

    //获取设备列表
    getDeviceList().then(res => {
      this.deviceList = res.data.list;
      res.data.list.forEach(element => {
        let temp = [];
        temp.label = element.number + '/' + element.name;
        temp.value = element.id;
        this.numOptions.push(temp);
      });
    });
    getSystemUserList().then(res => {
      this.userOptions = res.data.list;
    });
    //获取工程师列表
    getEngineerList().then(res => {
      this.engineerOptions = res.data;
    });
    //获取工单列表
    this.getTableData();

    this.$nextTick(() => {
      this.tableHeightResize();

      // 监听窗口大小变化
      window.onresize = () => {
        this.tableHeightResize();
      };

      // 监听菜单栏的展开收起
      let sidebarEl = document.querySelector('.fold-icon');
      if (sidebarEl) {
        sidebarEl.addEventListener('click', () => {
          this.tableHeightResize();
        });
      }
    });
  },
  methods: {
    // 表格高度处理（示例）- 根据实际开发页面做相关调整即可
    tableHeightResize() {
      // 主内容区高度
      let mainContentEl = document.querySelector('.main');
      let mainContentHeight = mainContentEl ? mainContentEl.getBoundingClientRect().height : 0;

      /*
        表格高度（获取main元素的高度，然后减去其它元素的高度）
        18：页面标题
        76：操作栏
        51：表头
        72：页码
      */
      this.tableMaxHeight = mainContentHeight - 18 - 76 - 51 - 72;

      // 主内容区宽度
      let winInnerWidth = window.innerWidth;

      // 菜单栏宽度
      let sidebarWidth = document.querySelector('.sidebar-container').getBoundingClientRect().width;

      // 主内容区宽度
      let mainContentWidth = winInnerWidth - sidebarWidth - 20 - 30;
      mainContentWidth = mainContentWidth < 710 ? 710 : mainContentWidth;

      // 表格宽度
      let tableEl = document.querySelector('.el-table');
      tableEl.style.width = mainContentWidth - 40 + 'px';
    },
    // 处理权限
    checkBtnPermission(permission) {
      let boolean = checkBtnPermission(permission);
      return boolean;
    },
    //删除附件
    removeFile(file) {
      this.fileList.map((item, index) => {
        if (item.uid === file.uid) {
          this.fileList.splice(index, 1);
        }
      });
      console.log(this.fileList);
    },
    //物模型数据
    onModelData() {
      let params = {};
      params.id = 0;
      params.name = '';
      getModelList(params).then(res => {
        res.data.map(item => {
          item.value = item.id;
          item.label = item.name;
          this.modelSelectData.push(item);
          this.addForm.modelNameArr.push(item);
        });
      });
    },
    //清空表单的值
    onDeleteForm() {
      this.imgList = [];
      this.fileList = [];
      this.$refs.ruleFormref.resetFields();
    },
    onAddKnowledge(val) {
      this.device_model_id = val;
      this.addForm = {
        // modelNameArr: [],
        modelName: val,
        knowledgeTypeArr: [],
        knowledgeTypeName: '',
        jurisdictionValue: '2',
        titleValue: '',
        contentVlaue: '',
        isClear: false //清除富文本编辑器内容
      };
      this.trueEdit = false;
      this.imgList = []; //上传图片列表
      this.fileList = []; //文件上传列表
      let that = this; //传入照片列表
      let imgList = JSON.parse(this.knowledgeText.photos);
      for (let i in imgList) {
        that.imgList[i] = {};
        that.imgList[i].url = imgList[i];
      }
      console.log(that.imgList, imgList);
      if (this.imgList.length > 4) {
        this.fiveMore = true;
        this.fiveLess = false;
      } else {
        this.fiveMore = false;
        this.fiveLess = true;
      }
      //知识库分类
      getKnowCategoryList().then(res => {
        res.data.list.map(item => {
          item.value = item.id;
          item.label = item.name;
          this.addForm.knowledgeTypeArr.push(item);
        });
      });
      //重新创建富文本编辑器
      this.$nextTick(res => {
        this.$refs.textEdit.resetData();

        console.log(this.knowledgeText, '查看传入');
        if (this.activeName === 'first') {
          let txtEDit =
            '1.故障描述：' +
            this.knowledgeText.description +
            '</br> 2.处理方法：' +
            this.knowledgeText.processing_method;
          this.$refs.textEdit.txtHtml(txtEDit);
        } else {
          let txtEDit =
            '1.保养说明：' +
            this.knowledgeText.description +
            '</br> 2.处理方法：' +
            this.knowledgeText.processing_method;
          this.$refs.textEdit.txtHtml(txtEDit);
        }
      });
      console.log(this.imgList);
      this.addknowledgeDialog = true;
    },
    //提交新增知识库
    addKnowledgeSubmit() {
      this.$refs.ruleFormref.validate(valid => {
        if (valid) {
          let params = {
            device_model_id: this.addForm.modelName,
            category_id: this.addForm.knowledgeTypeName,
            is_public: parseInt(this.addForm.jurisdictionValue),
            title: this.addForm.titleValue,
            content: this.addForm.contentVlaue,
            photos: [],
            file_url: this.fileList.length === 0 ? '' : this.fileList[0].url,
            file_name: this.fileList.length === 0 ? '' : this.fileList[0].name
          };
          if (this.imgList.length >= 1) {
            this.imgList.forEach(res => {
              params.photos.push(res.url);
            });
          }
          createKnow(params).then(res => {
            this.addknowledgeDialog = false;
          });
        } else {
          return false;
        }
      });
    },
    sonClick(res) {
      if (res === 'cancel') this.dialogCancelOrder = true;
      if (res === 'modify') {
        this.imgList = [];
        let imgList = JSON.parse(this.detailData.photos);

        this.dialogModify = true;
        for (let i in imgList) {
          this.imgList[i] = {};
          this.imgList[i].url = imgList[i];
        }
        this.modifyData = this.detailData;
        this.modifyData.imgList = [];

        this.modifyData.imgList = this.imgList;
      }
      if (res === 'delete') this.dialogDeleteOrder = true;
      if (res === 'assign') this.dialogDistribute = true;
      if (res === 'knowledge') {
        this.addknowledgeDialog = true;
        this.dialogDetails = false;
      }
      if (res === 'recreate') {
        this.$nextTick(function () {
          this.ruleForm.selectDevice = this.detailData.device_id;
          this.ruleForm.description = this.detailData.description;
          this.ruleForm.contacts = this.detailData.contacts;
          this.ruleForm.contacts_tel = this.detailData.contacts_tel;
          this.ruleForm.address = this.detailData.address;
          this.dialogAddOrder = true;
        });
      }
    },
    //成功关闭修改弹窗
    succeedPoint(data) {
      // console.log(data,'操作成功')
      if (data === 'success') {
        this.dialogDetails = false;
        this.getTableData();
      }
    },

    //富文本编辑器值
    onEditorValue(value) {
      this.addForm.contentVlaue = value;
    },
    //选中设备
    changeDevice() {
      console.log(this.ruleForm.selectDevice);

      this.deviceList.forEach(res => {
        if (res.id === this.ruleForm.selectDevice) {
          this.ruleForm.address = res.countries + res.province + res.city + res.address;
          this.ruleForm.deviceName = res.name;
        }
      });
      //选中设备获取到合同编号
      if (this.ruleForm.selectDevice !== '') {
        getDeviceLastProject({ device_id: this.ruleForm.selectDevice }).then(res => {
          console.log(res.data.contacts);
          this.ruleForm.project_contract = res.data.contacts;
        });
      } else {
        this.ruleForm.project_contract = '';
      }

      //选中设备最新工单联系人
      getDeviceLastContact({ device_id: this.ruleForm.selectDevice }).then(res => {
        this.ruleForm.contacts = res.data.contacts;
        this.ruleForm.contacts_tel = res.data.contacts_tel;
      });
    },
    //提交新增工单
    submitAddOrder() {
      let params = {};
      params.address = this.ruleForm.address;
      params.contacts = this.ruleForm.contacts;
      params.contacts_tel = this.ruleForm.contacts_tel;
      params.customer = JSON.parse(localStorage.getItem('userInfo')).customer_name;
      params.description = this.ruleForm.description;
      params.device_id = this.ruleForm.selectDevice;
      params.device_number = this.ruleForm.selectDevice + '';
      params.device_name = this.ruleForm.deviceName;
      // this.ruleForm.isReport ? (params.is_report = 1) : (params.is_report = 0);
      if (this.ruleForm.isReport === false) {
        params.is_report = 1;
      } else if (this.ruleForm.isReport === true) {
        params.is_report = 2;
      }
      params.order_type = this.activeName === 'first' ? 1 : 2;
      params.project_contract = this.ruleForm.project_contract;

      if (params.is_report === 2) {
        params.source = 3;
      } else {
        params.source = 1;
      }

      params.photos = [];
      this.imgList.forEach(res => {
        params.photos.push(res.url);
      });
      console.log(params);
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return;
        createOrder(params).then(res => {
          if (res.message === '200') {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.dialogAddOrder = false;
            this.dialogDetails = false;
            this.activeName === 'first' ? this.getTableData(1) : this.getTableData(2);
          }
        });
      });
    },

    //上传附件
    addUploadFile(file) {
      const isLt3M = file.size / 1024 / 1024 < 100;
      if (!isLt3M) {
        this.$message.error('只能上传小于100M!');
        this.$refs.upload.clearFiles();
        this.files = null;
        return;
      }
      this.files = file.raw;
      // FormData 对象
      let formData = new FormData();
      // 文件对象
      formData.append('file', this.files);
      let fileName = this.files.name;
      uploadFile(formData).then(res => {
        this.fileList = [{ name: fileName, url: res.data.path }];
        this.fileFname = fileName;
      });
    },
    //显示详情弹窗
    showDetailsDialog() {
      this.dialogDetails = true;
    },
    //指派
    setAssign() {
      let params = {};
      this.dialogVisible = false;
      params.engineer_user_id = this.engineer;
      this.engineerOptions.forEach(res => {
        if (res.id === this.engineer) {
          params.engineer_user_name = res.name;
        }
      });
      params.id = this.clickRow.id;
      params.cc_user_list = [];
      this.selectUser.forEach(res => {
        let temp = {};
        temp.id = res;
        this.userOptions.forEach(item => {
          if (item.id === temp.id) {
            temp.name = item.username;
            params.cc_user_list.push(temp);
          }
        });
      });
      params.cc_user_list = JSON.stringify(params.cc_user_list);
      console.log(params);
      dispatchOrder(params).then(res => {
        if (res.message === '204') {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.dialogDistribute = false;
          this.dialogDetails = false;
          this.getTableData();
        }
      });
    },
    //取消工单
    setCancelOrder() {
      let params = {};
      params.cancel_cause = this.deleteReason;
      params.id = this.clickRow.id;
      cancelOrder(params).then(res => {
        if (res.message === '204') {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.dialogCancelOrder = false;
          this.dialogDetails = false;
          this.getTableData();
        }
      });
    },
    //删除工单
    submitDeleteOrder() {
      DeleteOrder({ id: this.clickRow.id }).then(res => {
        if (res.message === '204') {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.dialogDeleteOrder = false;
          this.dialogDetails = false;
          this.getTableData();
        }
      });
    },
    //图片删除
    handleRemove(file, fileList) {
      console.log(this.imgList, file, fileList, '<====');
      // this.imgList.forEach(res => {
      //   this.imgList.splice(
      //     this.imgList.findIndex(item => item.uid === file.uid),
      //     1
      //   );
      // });
      this.imgList = fileList;
      if (this.imgList.length > 4) {
        this.fiveMore = true;
        this.fiveLess = false;
      } else {
        this.fiveMore = false;
        this.fiveLess = true;
      }

      console.log(file);
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImg = true;
      if (this.imgList.length < 5) {
        this.fiveMore = false;
        this.fiveLess = true;
      } else {
        this.fiveLess = false;
        this.fiveMore = true;
      }
    },
    //切换标签页
    handleClick(tab, event) {
      let type = 1;
      this.activeName === 'first' ? (type = 1) : (type = 2);
      this.DateFilters = '';
      this.selectNum = '';
      this.selectStatus = '';
      this.selectSource = '';
      this.DateFilters = [];
      this.getTableData(type);

      // this.activeName === 'first'
      //   ? // this.tableConfig.columns[4].label = '故障描述'
      //     this.$set(config, 'label', '故障描述')
      //   : this.$set((config, 'label', '保养说明'));
    },
    //新增维修工单
    addRepairOrder() {
      this.dialogAddOrder = true;
      this.imgList = [];
      this.ruleForm.selectDevice = '';
      this.changeDevice();
      this.ruleForm = {
        deviceName: '',
        deviceNum: '',
        description: '',
        isReport: false,
        contacts: '',
        contacts_tel: '',
        project_contract: '',
        address: ''
      };
      if (this.imgList.length >= 4) {
        this.fiveMore = true;
        this.fiveLess = false;
      } else {
        this.fiveMore = false;
        this.fiveLess = true;
      }

      this.changeDevice();
    },
    httpRequest(data) {
      let _this = this;
      // let rd = new FileReader(); // 创建文件读取对象
      let file = data.file;
      // rd.readAsDataURL(file); // 文件读取装换为base64类型
      console.log(data);

      // FormData 对象
      let formData = new FormData();
      // 文件对象
      formData.append('file', file);
      uploadFile(formData).then(res => {
        this.imgList.push({ url: res.data.path });
        console.log(this.imgList);
      });
    },
    handleBeforeUpload(file) {
      //上传图片
      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
      const isLt3M = file.size / 1024 / 1024 < 2;
      console.log(this.imgList.length, '看看长度');
      if (this.imgList.length >= 4) {
        this.fiveMore = true;
        this.fiveLess = false;
      } else {
        this.fiveMore = false;
        this.fiveLess = true;
      }

      if (this.imgList.length >= 5) {
        this.$message.error('只能上传五张');
        console.log(this.imgList.length, '看看长度1');

        return;
      } else {
        console.log(this.imgList.length, '看看长度2');
      }
      if (!isJPG) {
        this.$message.error('上传图片格式不是JPG/GIF/PNG!');
        this.$refs.upload.clearFiles();
        this.files = null;
        return;
      }
      if (!isLt3M) {
        this.$message.error('只能上传小于2M!');
        this.$refs.upload.clearFiles();
        this.files = null;
        return;
      }

      let that = this;
      if (
        !(
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif' ||
          file.raw.type === 'image/jpg' ||
          file.raw.type === 'image/jpeg'
        )
      ) {
        this.$message.error('上传图片格式不是JPG/GIF/PNG!');
      } else {
        // let reader = new FileReader();
        // reader.onload = function (e) {
        //   that.imgList.push({ url: reader.result });
        // };
        // reader.readAsDataURL(file.raw);
      }
    },
    // 获取表格数据
    getTableData() {
      console.log(this.DateFilters, '<<<<');
      let params = {
        page: this.paginationOptions.currentPage, //当前页
        page_size: this.paginationOptions.pageSize, //每页显示数据条数
        order_no: this.selectNum,
        date_start: this.DateFilters && this.DateFilters[0] ? new Date(this.DateFilters[0]).getTime() / 1000 : '',
        date_end: this.DateFilters && this.DateFilters[1] ? new Date(this.DateFilters[1]).getTime() / 1000 : '',
        source: this.selectSource,
        status: this.selectStatus,
        extend: this.hiddenOrder ? 'complete' : ''
      };
      this.activeName === 'first' ? (params.order_type = 1) : (params.order_type = 2);
      getOrderList(params).then(res => {
        this.paginationOptions.total = res.data.total;

        res.data.list.forEach(res => {
          switch (res.source) {
            case 1:
              res.source = '手动创建';
              break;
            case 2:
              if (this.activeName === 'first') {
                res.source = '故障记录';
              } else {
                res.source = '保养通知';
              }
              break;
            case 3:
              res.source = '上报工单';
              break;
          }
          switch (res.status) {
            case 1:
              res.status = '已创建';
              break;
            case 2:
              res.status = '已派单';
              break;
            case 3:
              res.status = '已接单';
              break;
            case 4:
              res.status = '已完成';
              break;
            case 5:
              res.status = '已取消';
              break;
          }

          if (res.customer_id !== 1 && this.last_customer_id === res.customer_id) {
            res.customer_limit = 1; //客户发的客户看
          } else if (res.customer_id === 1) {
            res.customer_limit = 2; //长泰发的
          } else if (res.customer_id !== 1 && this.last_customer_id === 1) {
            res.customer_limit = 3; //客户发的长泰看
          }

          // if (res.device_name.length > 10) {
          //   res.device_name = res.device_name.substring(0, 10);
          // }
          // if (res.description.length > 20) {
          //   res.device_name = res.description.substring(0, 20) + '...';
          // }
        });
        this.tableData = res.data.list;

        // if (this.hiddenOrder) {
        //   this.tableData.splice(
        //     this.tableData.findIndex(item => item.status === '已完成'),
        //     1
        //   );
        // }
      });
    },
    // 字段排序
    handleSortChange(column, prop, order) {
      console.log('handleSortChange---', column, prop, order);
      let prop1 = column.prop;
      let order1 = column.order;

      if (order1 === 'ascending') {
        // console.log(prop1, order1, 1);
        this.$nextTick(function () {
          this.tableData.sort(function (a, b) {
            // console.log(a[prop1], b[prop1], 1);
            return a[prop1].localeCompare(b[prop1], 'zh');
          });
        });
      } else if (order1 === 'descending') {
        this.$nextTick(function () {
          this.tableData.sort(function (a, b) {
            // console.log(a[prop1], b[prop1], 2);
            return b[prop1].localeCompare(a[prop1], 'zh');
          });
        });
      }
    },
    // 页面跳转
    jumpFn() {
      this.$router.push({
        name: 'userChild',
        query: {
          id: 1
        },
        params: {
          name: 'xiaoming'
        }
      });
    }
  },
  beforeDestroy() {
    window.onresize = null;
  }
};
</script>
<style lang="scss">
.showBtn {
  .el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    line-height: 146px;
    vertical-align: top;
  }
}
.noneBtn {
  .el-upload--picture-card {
    display: none !important;
  }
}

.noneBtn >>> .el-icon-plus {
  display: none !important;
}
</style>
<style lang="scss" scoped>
//弹窗间距
::v-deep .el-dialog__body {
  padding: 20px 20px 25px 20px;
  overflow-y: auto;
  max-height: 580px;
  //滚动样式
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}
//表格样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}
.pagedown {
  float: right;
  position: fixed;
  z-index: 999;
  bottom: 15px;
  left: 0;
  right: 30px;
  // margin-right: 30px;
  width: auto !important;
}

.order-manage-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #fff;
  overflow: hidden;

  .operate-bar {
    display: flex;
    justify-content: space-between;
  }
}
.tabsStyle {
  margin-left: 20px;
  margin-top: 36px;
  font-size: 18px;
}
.screenInput {
  width: 200px;
}
.is-top {
  font-size: 18px !important;
}
.addOrderBox {
  position: absolute;
  top: 76px;
  right: 35px;
  z-index: 1;
}
.sourceAll,
.DateFilters,
.orderNum,
.isReportDescribe {
  margin-left: 10px;
}

.DateFilters {
  display: inline-block;
}
.orderNum {
  width: 300px;
}
.isReportDescribe {
  color: #909399;
  font-size: 13px;
}
.hideOrder {
  position: absolute;
  right: 10px;
}
::v-deep .el-tabs__item {
  font-size: 18px;
}
.select {
  width: 100%;
}
::v-deep .el-upload-list__item.is-ready {
  display: none;
}
.messageBox {
  background: #fafafa;
  padding: 20px;
  margin-bottom: 20px;
}
.messageBox > div > div {
  display: inline-block;
  width: 50%;
}
.messageBox > div > div:nth-child(1) {
  margin-bottom: 10px;
}
.messageBox > div > div > span {
  margin-right: 10px;
}
.ruleForm {
  margin-top: 20px;
}
.titleName {
  text-align: center;
  margin-bottom: 30px;
}
.titleName > p {
  color: #2454b3;
  font-size: 24px;
  display: inline-block;
}
.warningTitle {
  display: inline-block;
  font-size: 16px;
  line-height: 25px;
  margin-bottom: 20px;
}
.warningIcon {
  color: #e6a23c;
  font-size: 30px;
}
.ReasonInput {
  width: 490px;
}
.warningBox {
  text-align: center;
}

//新增知识库弹窗
.add-knowledge-select-class1 {
  width: 860px;
}
.knowlege-flex {
  display: flex;
}
.add-knowledge-select-class {
  width: 300px;
}
.add-knowledge-jurisdiction {
  margin-left: 100px;
}
.add-knowledge-margin {
  margin-right: 10px;
}
.add-knowledge-file {
  margin-left: 10px;
}
</style>
